<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 24px" :bordered="false" title="营养风险筛查评估表（NRS-2002）">
      <a-button slot="extra" type="danger" @click="exit"> 返回首页 </a-button>
      <div class="table-operator" style="border-top: 5px">
        <a-button type="danger" @click="add" :disabled="buttonStatus"> 填写量表 </a-button>
      </div>

      <a-tabs v-model="activeKey" hide-add @click="changeNrs()" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          {{ pane.content }}
        </a-tab-pane>
      </a-tabs>
      <div class="container">
        <div class="width90">
          <a-form-model-item layout="inline" label="评估结果" v-if="evalution1.output">
            <span class="ant-form-text">
              {{ evalution1.output }}
            </span>
          </a-form-model-item>
          <a-form-model-item label="1.疾病状态">
            <j-multi-select-tag v-model="model.diseaseStatus" :options="diseaseList" type="checkbox">
            </j-multi-select-tag>
          </a-form-model-item>
          <a-form-model-item class="block" label="2.营养状况指标">
            <a-radio-group v-model="model.nutritionalStatus" :options="options" />
          </a-form-model-item>
          <a-form-model-item label="3.年龄是否>=70岁">
            <a-radio-group v-model="model.isSeventy" :options="options1" />
          </a-form-model-item>

          <div class="footer" v-if="!evalution1.output">
            <a-button
              :loading="saveLoading"
              style="margin-left: 500px; margin-top: 15px; margin-bottom: 1px"
              type="danger"
              @click="postNrs()"
            >
              评估
            </a-button>
          </div>
        </div>
      </div>
    </a-card>
  </a-spin>
</template>

<script>
import { EvalutionMixin } from '@/mixins/EvalutionMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'

export default {
  name: 'Psqi',
  mixins: [EvalutionMixin],
  data() {
    var panes = []

    return {
      sas: {},
      evalution1: {
        output: ''
      },
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId] },
      buttonStatus: false,
      savaRes: [],
      input: [],
      model: {},

      activeKey: panes.content,
      panes,
      newTabIndex: 0,
      url: {
        postNrs: 'evaluation/nrs/save',
        getNrs: 'evaluation/nrs/list'
      },
      options: [
        {
          value: 1,
          label: '正常营养状态'
        },
        {
          value: 2,
          label: '3个月内体重减轻>5%或最近1个星期进食量（与需要量相比）减少20%-50%'
        },
        {
          value: 3,
          label: '2个月内体重减轻>5%或BMI18.5-20.5或最近1个星期进食量（与需要量相比）减少50%-75%'
        },
        {
          value: 4,
          label:
            '1个月内体重减轻>5%（或3个月内体重减轻>15%）或BMI<18.5（或血清蛋白<35g/l）或最近1个星期进食量（与需要量相比）减少70%-100%'
        }
      ],
      options1: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 2,
          label: '否'
        }
      ],
      diseaseList: [
        {
          label: '骨盘骨折或者慢性病病人合并有以下疾病：肝硬化、慢性阻塞性肺病、长期血液透析、糖尿病、肿瘤',
          value: '1'
        },
        {
          label: '腹部重大手术、脑卒中、重症肺炎、血液系统肿瘤',
          value: '2'
        },
        {
          label: '颅脑损伤、骨髓移植、加护病患（APACHE>10分）',
          value: '3'
        }
      ]
    }
  },
  created() {
    this.getNrs()
  },
  methods: {
    callback(key) {
      console.log(key)
    },
    onEdit(targetKey, action) {
      this[action](targetKey)
    },
    exit() {
      const patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let query = {}
      query[PAGE_MENU_TYPE.ParamsField] = PAGE_MENU_TYPE.HealthManage
      query[PAGE_MENU_TYPE.PatientId] = patientId
      this.$router.push({
        path: '../index',
        query
      })
    },

    add() {
      this.buttonStatus = true
      this.model = {}
      this.evalution1.output = ''
      const panes = this.panes
      const activeKey = `newTab${this.newTabIndex++}`
      panes.unshift({
        title: '请开始填写',
        key: activeKey,
        closable: false
      })
      this.panes = panes
      this.activeKey = activeKey
    },
    remove(targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter(pane => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    }
  }
}
</script>
<style scoped lang="less">
.container {
  background-color: #fff;
  margin: 0 auto;
}
.title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #333333;
  margin: 15px 0;
}
/* .footer {
  text-align: center;
} */
.tall-text {
  font-size: 12px;
  margin: 20px auto;
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px;
}
p {
  margin: 5px;
}
.eval_p {
  margin: 15px 10px;
}
.eval_diet {
  margin-top: 15px;
  font-size: 16px;
}
.width90 {
  width: 90%;
  margin: 0 auto;
}
/deep/.ant-checkbox-wrapper {
  display: block;
}
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}
/deep/.block .ant-radio-wrapper {
  display: block;
}
</style>

